<template>
    <div id="tag-strength-chart-main"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';

const props = defineProps(['data'])
const handleData = ({ studentList, tagList }) => {
    const averageData = []
    tagList.forEach(({ title }) => {
        const filteredStudentList = studentList.filter(({ score }) => score[title])
        averageData.push(parseFloat((filteredStudentList.reduce((acc, { score }) => acc + score[title], 0) / (filteredStudentList.length || 1)).toFixed(2)))
    })
    return {
        categoryData: tagList.map(tag => tag.title),
        averageData
    }
}

onMounted(() => initChart())

const initChart = () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('tag-strength-chart-main'));
    const { categoryData, averageData } = handleData(props.data)
    // console.log(categoryData, averageData)
    // 绘制图表
    myChart.setOption({
        title: [
            {
                text: '技术tag强弱图',
                textStyle: {
                    fontSize: 14,
                    color: 'white'
                }
            }
        ],
        polar: {
            radius: [30, '80%']
        },
        radiusAxis: {
            max: 5,
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        angleAxis: {
            type: 'category',
            data: categoryData,
            startAngle: 90,
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        tooltip: {},
        series: {
            type: 'bar',
            data: averageData,
            coordinateSystem: 'polar',
            label: {
                show: true,
                position: 'middle',
                formatter: '',
                color: 'white'
            }
        },
        colorBy: "data",
        color: ['#FCCE10', '#E87C25', '#27727B',
            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'],
        animation: true
    });
}
</script>

<style lang="scss" scoped>
#tag-strength-chart-main {
    height: 100%;
    background: url('../../assets/t_bg.png') no-repeat center;
    background-size: 100% 100%;
}
</style>